import React, { useEffect } from 'react';
import './js/SliderVerify.min.js'
import './css/index.css'
import { Modal, message } from 'antd';
const SliderVerifyCaptcha = () => {
    useEffect(() => {
        // 动态加载 SliderVerify.min.js
        if (!window.SliderVerify) {
            const script = document.createElement('script');
            script.src = './js/';
            script.async = true;
            document.body.appendChild(script);
        }

        // 初始化滑块验证
        const initCaptcha = () => {
            if (window.SliderVerify) {
                SliderVerify.init({
                    el: document.getElementById("captcha"),
                    onSuccess: function () {
                        message.success('验证成功')
                    },
                    onFail: cleanMsg,
                    onRefresh: cleanMsg,
                });
            }
        };

        // 清除消息的函数
        function cleanMsg() {
            document.getElementById("msg").innerHTML = "";
        }

        // 声明 intervalId 在顶层作用域
        let intervalId;

        // 等待脚本加载完成后初始化滑块验证
        if (window.SliderVerify) {
            initCaptcha();
        } else {
            intervalId = setInterval(() => {
                if (window.SliderVerify) {
                    clearInterval(intervalId);
                    initCaptcha();
                }
            }, 100);
        }

        // 组件卸载时清除定时器
        return () => {
            if (intervalId) {
                clearInterval(intervalId);
            }
        };
    }, []);

    return (
        <div className="container">
            <div id="captcha"></div>
            <div id="msg"></div>
        </div>
    );
};

export default SliderVerifyCaptcha;